<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/login.css" rel="stylesheet" type="text/css"/>
	<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
	function checkImg(){
		// 更新验证码
	}
</script>
</head>
<body>

<div id="app">
	<div class="container header">

		<div class="span5">
			<div class="logo">
				<a href="index.html">
					<img src="image/r___________renleipic_01/logo.png" alt="依依不舍"/>
				</a>
			</div>
		</div>
		<div class="span9">
			<div class="headerAd">
				<img src="image/header.jpg" width="320" height="50" alt="正品保障" title="正品保障"/>
			</div>	</div>
		<div class="span10 last">
			<div class="topNav clearfix">
				<ul>


					<li id="headerLogin" class="headerLogin" style="display: list-item;">
						<a href="login.html">登录</a>|
					</li>
					<li id="headerRegister" class="headerRegister" style="display: list-item;">
						<a href="reg.html">注册</a>|
					</li>



					<li id="headerUsername" class="headerUsername"></li>
					<li id="headerLogout" class="headerLogout">
						<a>[退出]</a>|
					</li>
					<li>
						<a>会员中心</a>
						|
					</li>
					<li>
						<a>购物指南</a>
						|
					</li>
					<li>
						<a>关于我们</a>

					</li>
				</ul>
			</div>
			<div class="cart">
				<a  href="cart.html">购物车</a>
			</div>
			<div class="phone">
				客服热线:
				<strong>96008/53277764</strong>
			</div>
		</div>



		<div class="span24">
			<ul class="mainNav">
				<li>
					<a href="index.html">首页</a>
					|
				</li>

				<li>
					<a href="clist.html?1&pageIndex=1">
						女装男装
					</a>
					|</li>

				<li>
					<a href="clist.html?2&pageIndex=1">
						鞋靴箱包
					</a>
					|</li>

				<li>
					<a href="clist.html?3&pageIndex=1">
						运动户外
					</a>
					|</li>

				<li>
					<a href="clist.html?4&pageIndex=1">
						珠宝配饰
					</a>
					|</li>

				<li>
					<a href="clist.html?5&pageIndex=1">
						手机数码
					</a>
					|</li>

				<li>
					<a href="clist.html?6&pageIndex=1">
						家电办公
					</a>
					|</li>

				<li>
					<a href="clist.html?7&pageIndex=1">
						护肤彩妆
					</a>
					|</li>

			</ul>
		</div>


	</div>
	<div class="container login">
		<div class="span12">
			<div class="ad">
				<img src="image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">
			</div>
		</div>
		<div class="span12 last">
			<div class="wrap">
				<div class="main">
					<div class="title">
						<strong>会员登录</strong>USER LOGIN
					</div>
					<div class="title">

					</div>
					<form id="loginForm" action="login.html"  method="post" novalidate="novalidate">
						<table>
							<tbody><tr>
								<th>
									用户名:
								</th>
								<td>
									<input type="text" id="username" v-model="username" class="text" maxlength="20"/><span></span>
								</td>
							</tr>
							<tr>
								<th>
									密&nbsp;&nbsp;码:
								</th>
								<td>
									<input type="password" id="password" v-model="password" class="text" maxlength="20" autocomplete="off"/><span></span>
								</td>
							</tr>
							<tr>
								<th>
									验证码:
								</th>
								<td>
									<span class="fieldSet">
										<input type="text" id="captcha" v-model="vcode" class="text captcha" maxlength="4" autocomplete="off">
										<img id="captchaImage" class="captchaImage" src="user/vcode/image" title="点击更换验证码" onclick="checkImg()" height="25px">
									</span>
								</td>
							</tr>
							<tr>
								<th>&nbsp;

								</th>
								<td>
									<label>
										<input type="checkbox" id="isRememberUsername" name="isRememberUsername" value="true">记住用户名
									</label>
									<label>
										&nbsp;&nbsp;<a >找回密码</a>
									</label>
								</td>
							</tr>
							<tr>
								<th>&nbsp;

								</th>
								<td>
									<input @click.prevent="login" type="submit" class="submit" value="登 录">
									<input @click.prevent="showCode" type="submit" class="submit" value="扫码登录">
								</td>
							</tr>
							<tr class="register">
								<th>&nbsp;

								</th>
								<td>
									<dl>
										<dt>还没有注册账号？</dt>
										<dd>
											立即注册即可体验在线购物！
											<a href="./会员注册.htm">立即注册</a>
										</dd>
									</dl>
								</td>
							</tr>
							</tbody></table>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="container footer">
		<div class="span24">
			<div class="footerAd"><img src="image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势" /></div>
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li>
					<a >关于我们</a>
					|
				</li>
				<li>
					<a>联系我们</a>
					|
				</li>
				<li>
					<a>招贤纳士</a>
					|
				</li>
				<li>
					<a>法律声明</a>
					|
				</li>
				<li>
					<a>友情链接</a>
					|
				</li>
				<li>
					<a target="_blank">支付方式</a>
					|
				</li>
				<li>
					<a  target="_blank">配送方式</a>
					|
				</li>
				<li>
					<a>服务声明</a>
					|
				</li>
				<li>
					<a>广告声明</a>

				</li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright © 2005-2013 Mango商城 版权所有</div>
		</div>
	</div>
	<el-dialog
				title="扫描登录"
				:visible.sync="dialogVisible"
				width="30%">
			<el-image src="/user/loginCode" @load="createWS"></el-image>
			<span slot="footer" class="dialog-footer">
		<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	  </span>
	</el-dialog>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			username: "",
			password: "",
			vcode: "",
			dialogVisible : false,
			webSocket : null
		},
		created() {
		},
		methods : {
			createWS(){
				let uuid = document.cookie.replace(/uuid=([\w\-]+)/,"$1");
				// zuul 网关不支持 websocket, 绕开zuul 直接访问 user 应用
				this.webSocket = new WebSocket("ws://127.0.0.1:8001/qc/"+uuid);
				this.webSocket.onmessage = (e)=>{
					console.info(e);
					if(e.data == 'login success!'){
						// 登录成功! 跳转首页
						location.href = "/";
					}
				}
			},

			login(){
				var p = new URLSearchParams();
				p.append("name", this.username);
				p.append("pwd", this.password);
				p.append("vcode", this.vcode);
				axios.post("user/login/login",p).then(res=>{
					if(res.data.code){
						location.href="/";
					} else {
						this.$alert(res.data.msg);
					}
				})
			},
			showCode(){
				this.dialogVisible = true
			}
		}
	})
</script>

</body></html>